<template>
    <div class="gauge" ref="gauge"></div>
</template>

<script>
import * as echarts from 'echarts';

const colorArr = ['#23C346', '#E7C32D', '#E66338', '#9066E8', '#2B93CA']
export default {
    data() {
        return {
            chartGauge: null,
            centers: [['20%', '40%'], ['50%', '40%'], ['80%', '40%'], ['35%', '75%'], ['65%', '75%']],
            option: {
                color: colorArr,
                title: {
                    text: '▎ 库存和销量分析',
                    left: '5%',
                    top: '5%',
                    textStyle: {
                        color: 'white',
                        fontSize: 14
                    }
                },
                series: []
            },
            ws: null,
            page: 1
        }
    },
    methods: {
        getData() {
            this.ws = new WebSocket('ws://127.0.0.1:9998')
            this.ws.onopen = () => {
                console.log('连接成功');
                let params = {
                    action: 'getData',
                    socketType: 'stockData',
                    chartName: 'stock',
                    value: ''
                }
                this.ws.send(JSON.stringify(params))
                this.ws.onmessage = (e) => {
                    // console.log(JSON.parse(JSON.parse(e.data).data));
                    let stock = JSON.parse(JSON.parse(e.data).data)
                    let list = stock.slice((this.page - 1) * 5, this.page * 5)
                    this.option.series = []
                    list.forEach((item, index) => {
                        this.option.series.push({
                            type: 'gauge',
                            startAngle: 90,
                            endAngle: -270,
                            pointer: {
                                show: false
                            },
                            progress: {
                                show: true,
                                overlap: false,
                                clip: false
                            },
                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                show: false
                            },
                            axisLine: {
                                lineStyle: {
                                    width: 5,
                                    color: [[1, '#333843']]
                                }
                            },
                            data: [{
                                name: item.name,
                                value: item.sales,
                                title: {
                                    offsetCenter: ['0%', '-15%'],
                                    color: colorArr[index],
                                    fontSize: 8
                                },
                                detail: {
                                    valueAnimation: true,
                                    fontSize: 8,
                                    color: 'inherit',
                                    offsetCenter: ['0%', '20%']
                                }
                            }],
                            radius: '35%',
                            center: this.centers[index],
                            max: item.sales + item.stock
                        })
                    })
                    this.chartGauge.setOption(this.option)
                    this.page++
                    if (this.page > (stock.length / 5)) {
                        this.page = 1
                    }
                }
            }
        }
    },
    mounted() {
        this.chartGauge = echarts.init(this.$refs.gauge)
        this.getData()
        window.addEventListener('resize', () => {
            this.chartGauge.resize()
        })
    }
}
</script>

<style lang="scss" scoped>
.gauge {
    height: 100%;
}
</style>